import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
import login from '../components/login'
// 导入home页面
import Home from '../components/home'
// 导入welcome页面
import Welcome from '../components/welcome.vue'
// 导入用户列表页面
import Users from '../components/users/users'
Vue.use(VueRouter)

const routes = [
  {
    // 路由重定向（要求访问根组件时自动跳转到登录页）
    path:"/",
    redirect:"/login"

  },
  {
    // 登录路由
    path:"/login",
    component:login
  },
  {
    // home路由
    path:"/home",
    component:Home,
    children:[
      {
        path:"/welcome",
        component:Welcome
      },
      {
        path:"/users",
        component:Users
      }
      
    ],
    //进入home页面中重定向到welcome页面
    redirect:"/welcome",

  }
]

const router = new VueRouter({
  routes
})
// 挂载路由守卫，验证用户访问页面的权限
// 如果用户访问的是login页面直接next()放行即可
// 如果用户访问的是其他页面就要判断用户是否登录
// 验证时根据本地是否存储了token为依据
// 先从本地获取token
// 如果没有，就强制用户去登录页面进行登录
// 如果有就直接放行
// 这里next有两种用法，next（）直接放行
// next('/login')强制跳转到某个页面
router.beforeEach((to,from,next)=>{
  // 如果用户即将要访问的页面是login,则直接放行
    if(to.path==="/login") return next();
    // 获取token看看是否存在
    const token=window.sessionStorage.getItem("token")
    // 如果token不存在，强制跳转到登录页面去进行登录
    if(!token) return next("/login")
    // 存在就放行
    next()



})
export default router
